<template>
  <view>
    <button v-for="(i,index) in 4" :key="index" @click="change(index)">view{{index}}</button>
    <swiper vertical="true" height="200" disable-touch="true" :current="current">
      <swiper-item>
        <scroll-view scroll-y="true" style="height: 200rpx;">
          <view class="swiper-item" style="height: 600rpx; background-color: red; width: 90%;">1</view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">2</view>
      </swiper-item>
    </swiper>

    <view @click="id = 'a1'">a1</view>
    <view @click="id = 'a2'">a2</view>
    <view @click="id = 'a3'">a3</view>
    <view @click="id = 'a4'">a4</view>
    <scroll-view scroll-y="true" style="height: 200rpx;" :scroll-into-view="id" scroll-with-animation="true">
      <view style="height: 200rpx;" id="a1">1</view>
      <view style="height: 200rpx;" id="a2">2</view>
      <view style="height: 200rpx;" id="a3">3</view>
      <view style="height: 200rpx;" id="a4">4</view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: '',
        id: 'a1'
      }
    },
    methods: {
      change(index) {
        console.log(index);
        this.current = index
      }
    }
  }
</script>

<style>
  swiper-item {
    background-color: aqua;
  }
</style>